<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <script>   

        // var test = () =>{
        //     console.log("test被调用");
        // }
        // test();

        // // 当只有一个参数时,可以不加()
        // test = a =>{
        //     console.log("test被调用",a);
        // }
        // test(10);

        // test = (a,b) =>{
        //     console.log("test被调用",a,b);
        // }
        // test(10,20);

        // test = (a,b) =>{
        //     return a + b;
        // }
        // console.log(test(10,20));


        // test = (a,b) => a + b;
        // console.log(test(10,20));



        var obj = {
            name:"obj",
            run:function(){
                console.log("run",this); //obj
            },
            run1(){  //对象中函数的简写方式
                console.log("run111",this); //obj
            },
            run2:()=>{  //箭头函数 就是将function取消掉, 在()后面添加上了=>
                console.log("run2222",this); //window
            }
        }
        obj.run();
        obj.run1();
        obj.run2();

        // setTimeout(()=>{ })

        var num = 10;
        var but = document.querySelector("button");
        but.onclick = function(){
            // var num = 20;
            console.log(this); //button
            setTimeout(function(){
                var num = 30;
                // 因为setTimeout是window调用的
                console.log(this); //window
                console.log(num); // 30
            },1000)

            // 箭头函数中的this只得是最近的非箭头函数的外层作用域中的this
            setTimeout(()=>{
                console.log(num);//20
                console.log(this);// button
            },1000)
        }
    </script>
</body>
</html>